<!--
 * @Author: canlong.shen
 * @Date: 2021-10-21 16:57:26
 * @LastEditors: your name
 * @LastEditTime: 2021-10-25 14:21:44
 * @Description: file content
-->
<html>
  <head>
    <title>课06.Vuex的五大核心——Getter</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vuex -->
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 100,
           todoList:[
             {id:1,name:"吃饭",done:true},
             {id:2,name:"睡觉",done:true},
             {id:3,name:"打豆豆",done:true},
             {id:4,name:"写代码",done:true},
             {id:5,name:"打篮球",done:false},
             {id:6,name:"蹲厕所",done:true},
           ]
        },
        getters:{
           doneList(state){
               console.log("state",state)
              return state.todoList.filter(fi => fi.done)
           },
           doneListCount(state,getters){
              return getters.doneList.length
           },
           getDoneById:(state,getters)=>{
              return (id) => {
                return getters.doneList.find(fi => fi.id === id)
              }
           }
        },
        mutations: {
          increment(state) {
            state.count++
          },
        },
      })

      const Counter = {
        template: `
           <div>
            {{getDoneById(2)}}
            <h1>今天做了 {{doneListCount}} 件事情</h1>
             <ul>
                <li v-for="iter in  doneList">
                  {{iter.name}}  
                </li>
              </ul>
          </div>`,
        data() {
          return {
            start: 10000,
          }
        },
        computed: {
          ...Vuex.mapState(["todoList"]),
          ...Vuex.mapGetters(["doneList","doneListCount","getDoneById"]),
          sayHi() {
            return "hi"
          },
        },
      }

      const app = new Vue({
        el: "#app",
        store,
        components: {
          Counter,
        },
        template: `<div>
               <Counter></Counter>
              </div>`,
      })

      console.log("before", store.state.count)
      store.commit("increment")
      console.log("after", store.state.count)
    </script>
  </body>
</html>
